<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="24"><div class="centerTitle">个人报告</div></el-col>
      </el-row>
      <el-row :gutter="24" class="centerTable">
        <home-tab :tableData= "tableData" :tableConfig="tableConfig" :slotRow="true" @operation="goToOperation"/>
      </el-row>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
    </div>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div v-for="item in dialogList" :key="item.id">
        <el-button type="text" @click="checkReport(item)">{{item.student_title}}</el-button>
      </div>
    </el-dialog>
    <el-dialog title="下载" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
      <div v-for="item in downloadList" :key="item.id">
        <el-button type="text" @click="downloadListFn(item.id)">{{item.student_title}}</el-button>
      </div>
    </el-dialog>
    <el-dialog title="作答记录详情" :visible.sync="dialogVisible3" width="30%" :before-close="handleClose">
      <div v-for="item in answerList" :key="item.id">
        <el-button type="text" @click="answerListFn(item)">{{item.title}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import downloadApi from '@/common/downloadApi.js'
import homeTab from '@/components/table.vue'
import {APIGETPERSONALREPORT, APIALLLEARNINGPERIOD, APIALLLGRADE, APIALLCLASS, APIGETDOWNLOADREPORTPATH} from '@/common/api.js'
export default {
  components: {homeTab},
  data () {
    return {
      api: '',
      configRow: ['input', 'input', 'input', 'input', 'select', 'select', 'select', 'select', '', '', '', ''], // 配置的就是input、select 没有就是空
      configRowList: {
        plan_title: '',
        title: '',
        t_id: '',
        real_name: '',
        sex: '',
        section_title: '',
        grade_title: '',
        class_title: ''
      },
      tableData: [],
      tableConfig: {
        loading: false,
        class: 'table-list', // 表格的class名
        style: 'width:100%',
        checkout: false, // 控制是否有多选框
        index: true, // 是否有序号
        config: [
          {
            label: '测评计划名称',
            prop: 'plan_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '组合或量表名称',
            prop: 'title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '账号',
            prop: 't_id',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '姓名',
            prop: 'real_name',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '性别',
            prop: 'sex',
            align: 'center',
            modelValue: '',
            optionsList: [
              {title: '男', id: '1'},
              {title: '女', id: '2'}
            ]
          },
          {
            label: '学段',
            prop: 'section_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '年级',
            prop: 'grade_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '班级',
            prop: 'class_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '报告生成时间',
            prop: 'create_time',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '测评开始时间',
            prop: 'start_time',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '测评结束时间',
            prop: 'end_time',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            prop: 'operation',
            label: '操作',
            list: []
          }
        ]
      },
      currentPage: 1,
      total: 0,
      page: 1,
      form: {
        plan_title: '',
        title: '',
        account: '',
        real_name: '',
        sex: '',
        section_title: '',
        grade_title: '',
        class_title: ''
      },
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogList: [],
      downloadList: [],
      answerList: [],
      report_id: Number,
      hrefStr: '',
      menuList: []
    }
  },
  created () {
    this.selectFn()
    this.tableList()
    this.Api = downloadApi
    this.menuList = sessionStorage.getItem('list')
    if (this.menuList.includes('reportDetail')) {
      var operation1 = {id: 'details', name: '详情'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation1)
        }
      })
    }
    if (this.menuList.includes('reportExport')) {
      var operation2 = {id: 'download', name: '下载'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation2)
        }
      })
    }
    if (this.menuList.includes('scaleAnswer')) {
      var operation3 = {id: 'answer', name: '作答情况'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation3)
        }
      })
    }
  },
  methods: {
    InIt () { // 初始化
      this.tableData = []
      const arrs = Object.keys(this.configRowList)
      const obj = {}
      arrs.map((item, index) => {
        obj[item] = this.configRow[index]
      })
      this.tableData.unshift(obj)
    },
    selectFn () {
      APIALLLEARNINGPERIOD().then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '学段') {
            element.optionsList = res.data
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    dataProcessing () { // 整理
      this.tableConfig.config.forEach(element => {
        if (element.label === '测评计划名称') {
          this.form.plan_title = element.modelValue
        }
        if (element.label === '组合或量表名称') {
          this.form.title = element.modelValue
        }
        if (element.label === '账号') {
          this.form.account = element.modelValue
        }
        if (element.label === '姓名') {
          this.form.real_name = element.modelValue
        }
        if (element.label === '性别') {
          this.form.sex = element.modelValue
        }
        if (element.label === '学段') {
          if (element.modelValue !== '') {
            element.optionsList.forEach(item => {
              if (element.modelValue === item.id) {
                this.form.section_title = item.title
              }
            })
          }
        }
        if (element.label === '年级') {
          if (element.modelValue !== '') {
            element.optionsList.forEach(item => {
              if (element.modelValue === item.id) {
                this.form.grade_title = item.title
              }
            })
          }
        }
        if (element.label === '班级') {
          if (element.modelValue !== '') {
            element.optionsList.forEach(item => {
              if (element.modelValue === item.id) {
                this.form.class_title = item.title
              }
            })
          }
        }
      })
      this.tableList()
    },
    tableList () { // 表格
      this.form.page = this.page
      APIGETPERSONALREPORT(this.form).then((res) => {
        if (res.status === 1) {
          this.InIt()
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          res.data.list.forEach(item => {
            this.tableData.push(item)
          })
        } else {
          this.$message.error(res.msg)
          this.InIt()
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    goToOperation (val) { // 按钮
      if (val.id === 'query') {
        this.dataProcessing()
      } else if (val.id === 'del') {
        this.form = []
        this.tableConfig.config.forEach(element => {
          element.modelValue = ''
        })
        this.tableList()
      } else if (val.id === 'download') {
        this.downloadFn(val)
      } else if (val.id === 'details') {
        this.detailsFn(val)
      } else if (val.id === 'answer') {
        this.answerFn(val)
      }
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    downloadFn (val) {
      this.dialogVisible2 = true
      this.downloadList = val.rows.sub_list
      this.report_id = val.rows.report_id
    },
    downloadListFn (id) {
      APIGETDOWNLOADREPORTPATH({
        report_id: this.report_id,
        sid: id
      }).then((res) => {
        if (res.status === 1) {
          window.location.href = this.Api + res.data.url + '?report_info=' + res.data.report_info
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    answerListFn (val) {
      this.$router.push({path: '/answer', query: {uid: val.uid, sid: val.sid, report_id: val.report_id, title: val.title}})
    },
    detailsFn (val) { // 平台推荐=>1 自建=>2 单个量表=>3
      this.dialogVisible = true
      this.dialogList = val.rows.sub_list
      if (val.rows.plan_type === 3 || val.rows.plan_type === 2) {
        this.dialogList.forEach(item => {
          if (item.id === 925984) { // 六大兴趣
            item.hrefStr = '/api/report/sixInterest'
          } else if (item.id === 181731) { // 职业价值观
            item.hrefStr = '/api/report/professionalValue'
          } else if (item.id === 132462) { // MBTI
            item.hrefStr = '/api/report/MBTICharacter'
          } else if (item.id === 329235) { // 九大智能高中版
            item.hrefStr = '/api/report/nineSmart'
          } else if (item.id === 689942) { // 九大智能初中版
            item.hrefStr = '/api/report/nineSmart'
          } else if (item.id === 867971) { // 中学生问题解决能力量表
            item.hrefStr = '/api/report/problemSolving'
          } else if (item.id === 756492) { // 中学生沟通能力量表
            item.hrefStr = '/api/report/communicationSkills'
          } else if (item.id === 976297) { // 学生人际合作能力评估报告
            item.hrefStr = '/api/report/InterpersonalCooperation'
          } else { // 单个量表
            item.hrefStr = '/api/report/getIndividualReportView'
          }
          item.report_id = val.rows.report_id
          item.token = window.sessionStorage.getItem('token')
        })
      } else if (val.rows.plan_type === 1) {
        this.dialogList.forEach(item => {
          item.hrefStr = '/api/report/getRecommendIndividualReportView'
          item.report_id = val.rows.report_id
          item.token = window.sessionStorage.getItem('token')
        })
      }
    },
    answerFn (val) {
      this.dialogVisible3 = true
      this.answerList = val.rows.scale_list
      this.answerList.forEach(item => {
        item.sid = item.id
        item.uid = val.rows.uid
        item.report_id = val.rows.report_id
      })
      console.log(this.answerList)
    },
    handleClose (done) {
      done()
    },
    checkReport (row) {
      window.open(row.hrefStr + '?report_id=' + row.report_id + '&sid=' + row.id + '&token=' + row.token)
      this.dialogVisible = false
    }
  },
  computed: {
    newGrade () {
      let grade
      this.tableConfig.config.forEach(element => {
        if (element.label === '学段') {
          grade = element.modelValue
        }
      })
      return grade
    },
    newClass () {
      let newClass
      this.tableConfig.config.forEach(element => {
        if (element.label === '年级') {
          newClass = element.modelValue
        }
      })
      return newClass
    }
  },
  watch: {
    newGrade (newV, oldV) {
      APIALLLGRADE({
        section_id: newV,
        type: 2
      }).then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '年级') {
            element.optionsList = res.data
          }
          if (element.label === '年级') {
            element.modelValue = ''
          }
          if (element.label === '班级') {
            element.modelValue = ''
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    newClass (newV, oldV) {
      APIALLCLASS({
        grade_id: newV
      }).then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '班级') {
            element.optionsList = res.data
          }
          if (element.label === '班级') {
            element.modelValue = ''
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
